/** @define Toggle; use strict */

:root {
  --Toggle-rhythm: 1.5rem;
  --Toggle-color: currentColor;
  --Toggle-color-active: #fff;
  --Toggle-color-active-invert: #000;
  --Toggle-color-bg-active: var(--Toggle-color);
  --Toggle-transition: all .25s cubic-bezier(.075, .820, .165, 1.000);
}

/* Need to stick to this naming convention (against suitcss) so that it does
not conflict with the other frontend code
 */

.Toggle,
.Toggle-label {
  cursor: pointer;
}

.Toggle {
  position: relative;
  display: inline-block;
  min-width: calc(var(--Toggle-rhythm) * 1.375);
  margin: 0 calc(var(--Toggle-rhythm) * .0625);
  user-select: none;
  vertical-align: top;
}

.Toggle-checkbox {
  position: absolute;
  cursor: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Toggle-label {
  font-weight: 600;
  display: block;
  position: relative;
  padding: 0 calc(var(--Toggle-rhythm) * .375);
  transition: var(--Toggle-transition);
  text-align: center;
  color: var(--Toggle-color);
}

.Toggle-fakeCheckbox {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: transparent;
  border-radius: 4px;
}

.Toggle:hover > .Toggle-fakeCheckbox,
.Toggle-checkbox:focus ~ .Toggle-fakeCheckbox {
  background-color: var(--Toggle-color-bg-active);
  opacity: 0.2;
}

.Toggle-checkbox:checked ~ .Toggle-label,
.Toggle.is-active ~ .Toggle-label {
  color: var(--Toggle-color-active);
}

.Toggle-checkbox:checked ~ .Toggle-fakeCheckbox,
.Toggle.is-active > .Toggle-fakeCheckbox {
  background-color: var(--Toggle-color-bg-active);
}

.Toggle:hover > .Toggle-checkbox:checked ~ .Toggle-fakeCheckbox,
.Toggle-checkbox:checked:focus ~ .Toggle-fakeCheckbox,
.Toggle.is-active:hover > .Toggle-fakeCheckbox {
  opacity: 0.8;
}

nav.flex-wrapper:first-of-type(label.Toggle-label) {
  margin-left: 0.375rem;
}

.u-curved {
  border-radius: 4px;
}
